<template>
  <div class="search-page">
    <el-input
      placeholder="输入搜索文本"
      v-model="searchQuery"
      class="search-box"
      @input="debouncedHandleSearch"
    >
      <i slot="suffix" class="el-input__icon el-icon-search"></i>
    </el-input>

    <el-card
      v-for="(item, index) in filteredResults"
      :key="item"
      class="result-card"
      shadow="hover"
    >
      <div class="clearfix">
        <span>记录N{{ index + 1 }}</span>
      </div>
      <div class="card-content">
        <div>车型: HXD1</div>
        <div>车号: {{ item }}</div>
      </div>
    </el-card>

    <div v-if="!filteredResults.length && searchQuery" class="no-results">
      没有找到匹配的结果。
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      results: [1098, 1122, 1123, 1279, 1286, 1337, 1396, 1450, 1680, 5007, 5014],
      filteredResults: [],
      debounceTimeout: null
    }
  },
  methods: {
    handleSearch() {
      if (this.searchQuery) {
        this.filteredResults = this.results.filter((item) =>
          item.toString().includes(this.searchQuery)
        )
      } else {
        this.filteredResults = this.results
      }
    },
    debouncedHandleSearch() {
      clearTimeout(this.debounceTimeout)
      this.debounceTimeout = setTimeout(this.handleSearch, 300)
    }
  },
  mounted() {
    // 初始化时显示所有结果
    this.filteredResults = this.results
  },
  beforeDestroy() {
    // 组件销毁前清除定时器
    clearTimeout(this.debounceTimeout)
  }
}
</script>
<style scoped>
.search-box {
  margin-bottom: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.3s, border-color 0.3s;
  border: 1px solid #DCDFE6;
  font-size: 14px; /* 减小字体大小 */
}

.search-box:hover {
  border-color: #409EFF;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.1);
}

.result-card {
  margin-bottom: 15px;
  background-color: #FFFFFF;
  border: 1px solid #EBEEF5;
  border-radius: 4px;
  transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s;
  font-size: 14px; /* 减小字体大小 */
}

.result-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.1);
  background-color: #F2F6FC;
}

.card-content {
  padding: 15px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.search-page {
  max-height: 1000px;
  overflow-y: auto;
  padding: 20px;
  background-color: #F5F7FA;
}

.no-results {
  margin-top: 20px;
  text-align: center;
  color: #909399;
  font-size: 12px; /* 减小字体大小 */
  font-weight: bold;
}

/* 增加一些美化样式 */
.search-page {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  color: #2c3e50;
}

.search-box {
  width: 100%;
  padding: 10px;
  color: #606266;
}

.result-card {
  margin-bottom: 15px;
  background-color: #FFFFFF;
  border: 1px solid #EBEEF5;
  border-radius: 4px;
  transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s;
  font-size: 14px;
  height: 100px; /* 设置具体高度 */
}

.result-card:hover {
  border-color: #409EFF;
}

.card-content div {
  margin-bottom: 10px;
}

.no-results {
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
</style>
